import _ from 'lodash';
import React, {useCallback, useState, useRef} from 'react';
import {StyleSheet} from 'react-native';
import {
  SortableList,
  SortableListItemProps,
  View,
  TouchableOpacity,
  Text,
  Icon,
  Assets,
  Colors,
  Button,
} from 'react-native-ui-lib';
import {renderHeader} from '../ExampleScreenPresenter';
import {TestCase, TestSuite} from '@rnoh/testerino';

interface Item extends SortableListItemProps {
  text: string;
}

const data: Item[] = _.times(30, index => {
  let text = `${index}`;
  if (index === 3) {
    text = 'Locked item';
  }

  return {
    text,
    id: `${index}`,
    locked: index === 3,
  };
});

const SortableListScreen = () => {
  const [items, setItems] = useState<Item[]>(data);
  const [selectedItems, setSelectedItems] = useState<Item[]>([]);
  const [removedItems, setRemovedItems] = useState<Item[]>([]);
  const orderedItems = useRef<Item[]>(data);

  const toggleItemSelection = useCallback(
    (item: Item) => {
      if (selectedItems.includes(item)) {
        setSelectedItems(
          selectedItems.filter(
            selectedItem => ![item.id].includes(selectedItem.id),
          ),
        );
      } else {
        setSelectedItems(selectedItems.concat(item));
      }
    },
    [selectedItems, setSelectedItems],
  );

  const addItem = useCallback(() => {
    if (removedItems.length > 0) {
      orderedItems.current = orderedItems.current.concat(removedItems[0]);
      setItems(orderedItems.current);
      setRemovedItems(removedItems.slice(1));
    }
  }, [removedItems, setItems, setRemovedItems]);

  const removeSelectedItems = useCallback(() => {
    setRemovedItems(removedItems.concat(selectedItems));
    setSelectedItems([]);
    orderedItems.current = orderedItems.current.filter(
      item => !selectedItems.includes(item),
    );
    setItems(orderedItems.current);
  }, [
    setRemovedItems,
    removedItems,
    selectedItems,
    setItems,
    setSelectedItems,
  ]);

  const keyExtractor = useCallback((item: Item) => {
    return `${item.id}`;
  }, []);

  const onOrderChange = useCallback((newData: Item[]) => {
    console.log('New order:', newData);
    orderedItems.current = newData;
  }, []);

  const renderItem = useCallback(
    ({item, index: _index}: {item: Item; index: number}) => {
      const isSelected = selectedItems.includes(item);
      const {locked} = item;
      const Container = locked ? View : TouchableOpacity;
      return (
        <Container
          // TODO: fix Android selection color
          style={[
            styles.itemContainer,
            isSelected && styles.selectedItemContainer,
          ]}
          onPress={() => toggleItemSelection(item)}
          // overriding the BG color to anything other than white will cause Android's elevation to fail
          // backgroundColor={Colors.red30}
          centerV
          centerH={locked}
          paddingH-page>
          <View flex row spread centerV>
            {!locked && (
              <Icon
                source={Assets.icons.demo.drag}
                tintColor={Colors.$iconDisabled}
              />
            )}
            <Text center $textDefault={!locked} $textNeutralLight={locked}>
              {item.text}
            </Text>
            {!locked && (
              <Icon
                source={Assets.icons.demo.chevronRight}
                tintColor={Colors.$iconDefault}
              />
            )}
          </View>
        </Container>
      );
    },
    [selectedItems, toggleItemSelection],
  );

  return (
    <TestSuite name="SortableList">
      <TestCase itShould="例子: flexMigration, scale={1.02}">
        <View padding-20 style={[styles.height]}>
          <View flex bg-$backgroundDefault>
            {renderHeader('Sortable List', {'margin-10': true})}
            <View row center marginB-s2>
              <Button
                label="Add Item"
                size={Button.sizes.xSmall}
                disabled={removedItems.length === 0}
                onPress={addItem}
              />
              <Button
                label="Remove Items"
                size={Button.sizes.xSmall}
                disabled={selectedItems.length === 0}
                marginL-s3
                onPress={removeSelectedItems}
              />
            </View>
            <View flex useSafeArea>
              <SortableList
                flexMigration
                data={items}
                renderItem={renderItem}
                keyExtractor={keyExtractor}
                onOrderChange={onOrderChange}
                scale={1.02}
              />
            </View>
          </View>
        </View>
      </TestCase>
    </TestSuite>
  );
};

export default SortableListScreen;
const styles = StyleSheet.create({
  itemContainer: {
    height: 52,
    borderColor: Colors.$outlineDefault,
    borderBottomWidth: 1,
  },
  selectedItemContainer: {
    borderLeftColor: Colors.$outlinePrimary,
    borderLeftWidth: 5,
  },
  height:{
    height: 1700,
  }
});
